{template 'common/header'}
<ul class="nav nav-tabs">
	{loop $sign_rules $item}
	<li {if $rid == $item['rid']}class="active"{/if}><a href="{php echo $this->createWebUrl('stat', array('eid' => $_GPC['eid'], 'rid' => $item['rid']));}">{$item['name']}</a></li>
	{/loop}
</ul>
{if $act == 'display'}
<div class="main">
<div class="alert alert-info">
	<ul>
		<li>该数据统计自签到5.0 更新之后开始</li>
	</ul>
</div>
<div class="panel panel-default">
	<div class="panel-heading">
		数据统计
	</div>
	<div class="panel-body" id="scroll">
		<div class="pull-left">
			<form action="" id="form1">
				<input name="c" value="site" type="hidden" />
				<input name="a" value="entry" type="hidden" />
				<input name="eid" value="{$_GPC['eid']}" type="hidden" />
				{php echo tpl_form_field_daterange('datelimit', array('start' => date('Y-m-d', $starttime),'end' => date('Y-m-d', $endtime)), '')}
				<input type="hidden" value="" name="scroll">
				<input name="rid" type="hidden" value="{$rid}">
			</form>
		</div>
		<div class="pull-right">
			<div class="checkbox">
				<label style="color:#57B9E6;"><input checked type="checkbox">签到数</label>&nbsp;
			</div>
		</div>
		<div style="margin-top:20px">
			<canvas id="myChart"></canvas>
		</div>
	</div>
</div>
<script>
    {php $_urls = parse_url($_W['siteroot'])}
    var _path = '../../../../../../{$_urls["path"]}web/resource/js/lib';
    require.config({
        baseUrl: _path,
        paths: {
            'chart': 'chart.min',
        }
    });
	require(['chart', 'daterangepicker'], function(c) {
		$('.daterange').on('apply.daterangepicker', function(ev, picker) {
			$('input[name="scroll"]').val($(document).scrollTop());
			$('#form1')[0].submit();
		});
		{if $scroll}
        var scroll = "{$scroll}";
        $("html,body").animate({scrollTop: scroll}, 300);
        {/if}
        var chart = null;
        var chartDatasets = null;
        var templates = {
            flow1: {
                label: '浏览数',
                fillColor : "rgba(36,165,222,0.1)",
                strokeColor : "rgba(36,165,222,1)",
                pointColor : "rgba(36,165,222,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(36,165,222,1)"
            }
        };

        function refreshData() {
            if(!chart || !chartDatasets) {
                return;
            }
            var visables = [];
            var i = 0;
            $('.checkbox input[type="checkbox"]').each(function(){
                if($(this).attr('checked')) {
                    visables.push(i);
                }
                i++;
            });
            var ds = [];
            $.each(visables, function(){
                var o = chartDatasets[this];
                ds.push(o);
            });
            chart.datasets = ds;
            chart.update();
        }

        var url = location.href + '&#aaaa';
        $.post(url, function(data){
            var data = $.parseJSON(data);
            if (data) {
                var datasets = data.datasets;
                if(!chart) {
                    var label = data.label;
                    var ds = $.extend(true, {}, templates);
                    ds.flow1.data = datasets.flow1;
                    var lineChartData = {
                        labels : label,
                        datasets : [ds.flow1]
                    };
                    var ctx = document.getElementById("myChart").getContext("2d");
                    chart = new Chart(ctx).Line(lineChartData, {
                        responsive: true
                    });
                    chartDatasets = $.extend(true, {}, chart.datasets);
                }
            }
            refreshData();
        });

        $('.checkbox input[type="checkbox"]').on('click', function(){
            $(this).attr('checked', !$(this).attr('checked'))
            refreshData();
        });
    });
</script>
</div>
{/if}
{template 'common/footer'}